<template>
  <div class="shop-wrapper" @click="handleShowCar">
    <!-- 购物车底部显示栏 -->
    <div class="bottom-wrapper">
      <div class="left">
        <div class="car" :class="{'active-car': payCount}">
          <div class="cost-num" v-show="payCount">{{payCount}}</div>
          <span class="iconfont bus-icon"
            :class="{'bus-active': payCount}"
          >&#xe6b8;</span>
        </div>
        <div class="money">￥{{payCost}}</div>
      </div>
      <div class="desc border-left">
        另需配送费 ￥ {{seller.deliveryPrice}}元
      </div>
      <div class="delivery">
        <p class="pay" :class="payClass">{{payDesc}}</p>
      </div>
    </div>
    <transition name="fade">
      <div class="shop-car" v-show="showCar"></div>
    </transition>
    <car-list :showCar="showCar"></car-list>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CarList from './CarList'
export default {
  name: 'ShopCar',
  data () {
    return {
      showCar: false
    }
  },
  components: {
    CarList
  },
  computed: {
    ...mapState(['goods', 'seller']),
    delivery () {
      if (this.cost >= 20) {
        // 大于起送费，可进行配送
        return 1
      } else if (this.cost > 0) {
        // 金额小于配送费，显示差额
        return this.seller.minPrice - this.cost
      } else {
        return -1
      }
    },
    payDesc () {
      if (this.payCost <= 0) {
        return '￥' + this.seller.minPrice + '起送'
      } else if (this.payCost < this.seller.minPrice) {
        return `还差${this.seller.minPrice - this.payCost}元起送`
      } else {
        return '结算'
      }
    },
    payClass () {
      if (this.payCost <= 0) {
        return 'not-buy'
      } else if (this.payCost < this.seller.minPrice) {
        return 'not-enough'
      } else {
        return 'enough'
      }
    },
    payCount () {
      let totalCount = 0
      this.goods.forEach(good => {
        good.foods.forEach(food => {
          totalCount += food.count
        })
      })
      return totalCount
    },
    payCost () {
      let totalCost = 0
      this.goods.forEach(good => {
        good.foods.forEach(food => {
          totalCost += food.count * food.price
        })
      })
      return totalCost
    }
  },
  methods: {
    // 展示购物车
    handleShowCar () {
      this.showCar = !this.showCar
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/common.styl'
  .fade-enter, .fade-leave-to
    opacity 0
  .fade-enter-active, .fade-leave-active
    transition .5s
  .border-left::before
    border-color rgba(255, 255, 255, .4)
  .shop-wrapper
    z-index 100
    position relative
    height 1rem
    background-color #141d27
    color rgba(255, 255, 255, .4)
    .bottom-wrapper
      z-index 99
      position relative
      height 100%
      $flexVCenter()
      .left
        width 2.5rem
        height 100%
        $flexHAround()
        .money
          width 1rem
          font-size .35rem
          font-weight 500
        .active-car
          background-color rgb(0, 150, 240) !important
        .car
          width 1.1rem
          text-align center
          border 0.1rem solid #444444
          border-radius 50%
          background-color #363636
          position relative
          top -.2rem
          .cost-num
            position absolute
            right -.1rem
            top -.1rem
            padding .06rem .12rem
            border-radius .2rem
            background-color #ff3c15
            color #ffffff
            font-size .24rem
            line-height 1
          .bus-active
            color #ffffff !important
          .bus-icon
            color rgba(0, 0, 0, .4)
            font-size .65rem
            line-height .9rem
      .desc
        flex 1
        line-height .5rem
        font-weight 200
        padding-left .2rem
      .delivery
        width 2.1rem
        height 100%
        text-align center
        .pay
          height 100%
          $flexCenter()
          text-align center
          background-color #444444
          &.not-buy
            font-size .3rem
            font-weight bold
          &.not-enough
            font-size .26rem
          &.enough
            font-size .35rem
            background-color #4cd964
            color #ffffff
    .shop-car
      z-index -2
      position fixed
      top 0
      left 0
      right 0
      bottom 1rem
      background-color rgba(0, 0, 0, .4)
</style>
